<template>
  <div class="qrcode">
    <div class="code">
      <!-- decode是扫描结果的函数，torch用于是否需要打开手电筒，init用于检查该设备是否能够调用摄像头的权限，camera可用于打开前面或者后面摄像头  -->
      <qrcode-drop-zone style="height: 100vh" @decode="onDecode">
        <qrcode-stream
          @decode="onDecode"
          :torch="torchActive"
          @init="onInit"
          :camera="camera"
        >
          <!-- 摄像头打开之前隐藏扫描框 -->
          <div class="qr-scanner" :style="{ height: height }" v-if="showBox">
            <van-icon
              style="position: relative; top: 13px; left: 10px; z-index: 2002"
              color="#fff"
              name="arrow-left"
              size="24"
              @click="turnCameraOff"
            />
            <!-- <a >关闭</a> -->
            <van-button
              v-show="showClose"
              style="margin: 0.1rem; float: right; z-index: 100000"
              @click="turnCameraOff"
              size="small"
              icon="cross"
              plain
              hairline
              round
              type="info"
            />
            <div class="box">
              <div class="line"></div>
              <div class="angle"></div>
            </div>
          </div>
        </qrcode-stream>
      </qrcode-drop-zone>
    </div>
  </div>
</template>

<script>
// 引用vue-qrcode-reader插件
import { QrcodeStream, QrcodeDropZone, QrcodeCapture } from "vue-qrcode-reader";

export default {
  name: "Approve",
  props: {
    camera: {
      type: String,
      default: "off",
    },
    torchActive: {
      type: Boolean,
      default: false,
    },
    qrcode: {
      type: Boolean,
      default: false,
    },
    showClose: {
      type: Boolean,
      default: true,
    },
    noStreamApiSupport: {
      type: Boolean,
      default: false,
    },
    height: {
      type: String,
      default: "100%",
    },
  },
  data() {
    return {
      showBox: false,
    };
  },
  created() {},

  components: {
    // 注册组件
    QrcodeStream,
    QrcodeDropZone,
    QrcodeCapture,
  },
  methods: {
    // 扫码结果回调
    onDecode(result) {
      this.$emit("onDecode", result);
    },
    // 相机反转
    switchCamera() {
      this.$emit("switchCamera");
    },
    // 关闭相机
    turnCameraOff() {
      this.$emit("turnCameraOff");
    },
    // 打开手电筒
    ClickFlash() {
      this.$emit("ClickFlash");
    },
    // 检查是否调用摄像头
    // onInit(promise) {
    //   this.$emit("onInit", promise);
    // },
    async onInit(promise) {
      this.$emit("onInit", promise);
      try {
        await promise
          .then((res) => {
            console.log(res);
            if (res.capabilities && JSON.stringify(res.capabilities) == "{}") {
              this.showBox = false;
            } else {
              this.showBox = true;
            }
          })
          .catch((this.showBox = false));
      } catch (error) {
        this.showBox = false;
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.qrcode {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2001;
  width: 100vw;

  .code {
    height: 100vh;
  }
}
.qr-scanner {
  // background-image: linear-gradient(
  //     0deg,
  //     transparent 24%,
  //     rgba(82, 113, 233,0.1) 25%,
  //     rgba(82, 113, 233,0.1) 26%,
  //     transparent 27%,
  //     transparent 74%,
  //     rgba(82, 113, 233,0.1) 75%,
  //     rgba(82, 113, 233,0.1) 76%,
  //     transparent 77%,
  //     transparent
  //   ),
  //   linear-gradient(
  //     90deg,
  //     transparent 24%,
  //     rgba(82, 113, 233,0.1) 25%,
  //     rgba(82, 113, 233,0.1) 26%,
  //     transparent 27%,
  //     transparent 74%,
  //     rgba(82, 113, 233,0.1) 75%,
  //     rgba(82, 113, 233,0.1) 76%,
  //     transparent 77%,
  //     transparent
  //   );
  // background-size: 3rem 3rem;
  // background-position: -1rem -1rem;
  width: 100%;
  position: relative;
}

.qr-scanner .box {
  width: 75vw;
  height: 75vw;
  max-height: 75vh;
  max-width: 75vh;
  position: relative;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  overflow: hidden;
  border: 2px solid rgba(0, 55, 255, 0.2);
}

.qr-scanner .line {
  height: calc(100% - 2px);
  width: 100%;
  background: linear-gradient(180deg, rgba(0, 255, 51, 0) 43%, #5271e9 211%);
  border-bottom: 3px solid #5271e9;
  transform: translateY(-100%);
  animation: radar-beam 2s infinite;
  animation-timing-function: cubic-bezier(0.53, 0, 0.43, 0.99);
  animation-delay: 1.4s;
}

.qr-scanner .box:after,
.qr-scanner .box:before,
.qr-scanner .angle:after,
.qr-scanner .angle:before {
  content: "";
  display: block;
  position: absolute;
  width: 3vw;
  height: 3vw;

  border: 0.08rem solid transparent;
}

.qr-scanner .box:after,
.qr-scanner .box:before {
  top: 0;
  border-top-color: #5271e9;
}

.qr-scanner .angle:after,
.qr-scanner .angle:before {
  bottom: 0;
  border-bottom-color: #5271e9;
}

.qr-scanner .box:before,
.qr-scanner .angle:before {
  left: 0;
  border-left-color: #5271e9;
}

.qr-scanner .box:after,
.qr-scanner .angle:after {
  right: 0;
  border-right-color: #5271e9;
}

@keyframes radar-beam {
  0% {
    transform: translateY(-100%);
  }

  100% {
    transform: translateY(0);
  }
}
</style>
